<template>
  <div>
    <tabs :tabs="tabs" />
    <div class="circle-wrap">
      <div class="circle-header">
        <div class="circle-header-top">
          <div class="avatar"><el-avatar :src="circleInfo.avatar_url" size="40" /></div>
          <div class="info">
            <div class="name">{{ circleInfo.nick_name }}</div>
            <div class="time">{{ circleInfo.create_time }}</div>
          </div>
          <el-button v-if="circleInfo.recommend == 1" class="is-recommend" plain size="mini" icon="edu-icon--left edu-icon-zan1" @click="recommend(circleInfo.id)">
            已推荐
          </el-button>
          <el-button v-else plain size="mini" icon="edu-icon--left edu-icon-zan" @click="recommend(circleInfo.id)">推荐</el-button>
        </div>
        <div class="circle-header-content">
          <div class="desc">{{ circleInfo.content }}</div>
          <div class="parent">
            <el-row class="img" type="flex"><el-image v-for="image in circleInfo.attach_url" :key="image" :src="image" /></el-row>
          </div>
        </div>
        <div class="circle-header-footer">
          <div v-auth="'sns.circle.delete'" class="delete" @click="deleteCircle(circleInfo.id)">删除</div>
          <div class="like">点赞 {{ circleInfo.like_num }}</div>
          <el-divider direction="vertical" />
          <div class="comment">评论 {{ circleInfo.comment_num }}</div>
        </div>
      </div>
      <div class="circle-divider" />
      <div class="circle-comment-header">共{{ comments.total }}条评论</div>
      <div class="circle-comment"><comment v-for="item in comments.data" :key="item.id" :item="item" /></div>
      <div class="operation-wrapper">
        <div class="operation-placeholder" />
        <div class="operation-fixed">
          <el-row type="flex" justify="space-between">
            <div class="operation-left" />
            <div class="operation-right">
              <el-pagination
                :current-page.sync="paginate.page"
                :page-size="paginate.count"
                :page-sizes="pageSize"
                layout="total,sizes, prev, pager, next,jumper"
                :total="comments.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                @prev-click="handleCurrentChange"
                @next-click="handleCurrentChange"
              />
            </div>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import comment from './components/comment.vue';
import Tabs from './tabs';
export default {
  components: {
    comment,
    Tabs
  },
  data() {
    return {
      tabs: [
        {
          title: '动态详情',
          uri: '/sns/circle/' + this.$route.params.id + '/detail',
          meta: {
            permission: 'sns.circle.detail'
          }
        }
      ],
      circleInfo: {},
      comments: [],
      paginate: {
        page: 1,
        count: 12
      },
      pageSize: [10, 20, 30, 40]
    };
  },
  created() {
    this.$http.get(
      '/circle/admin/' + this.$route.params.id + '/detail',
      {},
      ({ data }) => {
        const { info: circleInfo, comments } = data;

        this.circleInfo = circleInfo;
        this.comments = comments;
      },
      _ => {}
    );
  },
  mounted() {
    this.$store.dispatch('setLoading', 0);
  },
  methods: {
    recommend(id) {
      if (this.hasPermission('sns.circle.recommend')) {
        const data = this.circleInfo;
        const recommend = data.recommend == 1 ? 0 : 1;
        this.$box
          .confirm(recommend ? '确认推荐该动态吗' : '确认取消推荐该动态吗')
          .then(() => {
            this.$http.put(
              '/circle/admin/' + id + '/recommend',
              {
                recommend: recommend
              },
              _ => {
                data.recommend = !data.recommend;
              },
              error => {
                this.$message.error(error.msg);
              },
              false
            );
          })
          .catch(() => {});
      } else {
        this.$message.error('暂无权限进行操作');
      }
    },
    deleteCircle: function(id) {
      this.$box
        .confirm('确认删除吗')
        .then(() => {
          this.$http.delete(
            '/circle/admin/' + id + '/delete',
            {},
            response => {
              this.$message.success(response.msg, _ => {
                this.$router.push({ path: '/sns/circle/list' });
              });
            },
            error => {
              this.$message.error(error.msg);
            }
          );
        })
        .catch(() => {});
    }
  },
  handleCurrentChange: function(page) {
    this.paginate.page = page;
    this.loadComments();
  },
  // 分页条数
  handleSizeChange: function(val) {
    // 更新加载条数
    this.paginate.count = val;
    this.handleCurrentChange(1);
    return val + '/页';
  },
  loadComments: function() {
    this.$http.get(
      '/circle/admin/' + this.$route.params.id + '/comments',
      {
        ...this.paginate
      },
      ({ data }) => {
        this.comments = data;
      },
      _ => {},
      false
    );
  }
};
</script>

<style lang="scss" scoped>
.circle-header {
  padding-left: 20px;
  padding-right: 30px;
  margin-bottom: 20px;
  .circle-header-top {
    display: flex;
    align-items: center;
    .info {
      flex: 1;
      margin-left: 18px;
      .name {
        font-size: 14px;
        font-weight: 500;
        color: #303133;
      }
      .time {
        margin-top: 5px;
        font-size: 12px;
        font-weight: 400;
        color: #909399;
      }
    }
    .is-recommend {
      color: #5191ff;
      border-color: #5191ff;
    }
  }
  .circle-header-content {
    margin-left: 60px;
    margin-top: 15px;
    .desc {
      font-size: 14px;
      font-weight: 400;
      color: #303133;
      line-height: 20px;
    }
    .parent {
      margin-top: 5px;
      display: flex;
      flex-wrap: wrap;
      margin-left: -5px;
      margin-right: -5px;
      .img {
        padding: 5px;
        .el-image {
          margin-right: 5px;
          display: block;
          height: 120px;
          width: 120px;
        }
      }
    }
  }
  .circle-header-footer {
    display: flex;
    margin-left: 60px;
    margin-top: 15px;
    font-size: 12px;
    font-weight: 400;
    color: #606266;
    .like {
      margin-left: auto;
    }
    .delete {
      cursor: pointer;
    }
  }
}
.circle-divider {
  height: 10px;
  background-color: #f8f8f8;
}
.circle-comment-header {
  font-size: 14px;
  font-weight: bold;
  color: #303133;
  padding: 12px 20px;
  border-bottom: 1px solid #ebeef5;
}
.circle-comment {
  padding-left: 20px;
  padding-right: 30px;
}

.operation-wrapper {
  .operation-placeholder {
    height: 57px;
  }
  .operation-fixed {
    padding: 10px 30px 15px 20px;
    position: fixed;
    bottom: 0;
    left: 231px;
    right: 0;
    z-index: 10;
    background-color: #fff;
    border-top: 1px solid #e4e7ed;
    .operation-left {
      ::v-deep .el-checkbox {
        margin-right: 10px;
      }
    }
  }
}
</style>
